// 演示
<template>
  <div class="common-layout" style="height: 600px">
    <el-container style="height: 600px">
      <el-aside
        style="
          padding-left: 20px;
          padding-top: 10px;
          display: flex;
          flex-direction: column;
        "
      >
        <el-row>
          <div class="demo-color-block" style="width: 300px">
            <span class="demonstration">color:</span>
            <el-color-picker
              v-model="backGroundColor"
              @active-change="backGroundColorActiveChange"
            />
          </div>
        </el-row>
        <el-row>
          <el-switch
            v-model="isShowBackgroundImage"
            @change="isShowBackgroundImageChange"
            class="ml-2"
          />
          <span>Show Background Image</span>
        </el-row>
        <div v-if="isShowBackgroundImage">
          <el-row style="margin: 10px">
            <span style="margin-right: 10px; text-align: left">Repeat:</span>
            <el-select
              v-model="repeatType"
              placeholder="Select"
              size="large"
              style="width: 160px"
              @change="repeatTypeChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
          <el-row>
            <span style="margin: 10px">Watermark Angle:</span>
          </el-row>
          <el-row>
            <div class="slider-demo-block" style="width: 300px">
              <el-slider
                v-model="watermarkAngleValue"
                :min="0"
                :max="360"
                :show-tooltip="false"
                size="small"
                style="width: 300px"  
                @input="watermarkAngleInput"
                show-input
              />
            </div>
          </el-row>
          <el-row style="margin: 10px">
            <span style="margin-right: 10px; text-align: left">Position:</span>
            <el-select
              v-model="backgroundPositionValue"
              placeholder="Select"
              size="large"
              style="width: 160px"
              @change="backgroundPositionChange"
            >
              <el-option
                v-for="item in backgroundPositionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
          <el-row style="margin: 10px">
            <span style="margin-right: 10px; text-align: left">Size:</span>
            <el-select
              v-model="backgroundSizeValue"
              placeholder="Select"
              size="large"
              style="width: 160px"
              @change="backgroundSizeChange"
            >
              <el-option
                v-for="item in backgroundSizeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
          <el-row>
            <div class="slider-demo-block" style="width: 300px">
              <span style="margin: 10px">Opacity:</span>
              <el-slider
                v-model="opacityValue"
                :min="0.05"
                :max="1.0"
                :step="0.05"
                :show-tooltip="false"
                size="small"
                style="width: 200px"
                @input="opacityInput"
                show-input
              />
            </div>
          </el-row>
        </div>
      </el-aside>
      <el-main style="height: 600px">
        <div id="container"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

const backGroundColor = ref("#eee7e7");
const isShowBackgroundImage = ref(false);
const repeatType = ref("no-repeat");
const base64ImgStr =
  "";
const imageURL = ref(base64ImgStr);
const opacityValue = ref(1.0);
const backgroundPositionValue = ref("center");
const backgroundSizeValue = ref("auto auto");
const watermarkAngleValue = ref(20);

const options = [
  {
    value: "no-repeat",
    label: "no-repeat",
  },
  {
    value: "repeat",
    label: "repeat",
  },
  {
    value: "repeat-x",
    label: "repeat-x",
  },
  {
    value: "repeat-y",
    label: "repeat-y",
  },
  {
    value: "round",
    label: "round",
  },
  {
    value: "space",
    label: "space",
  },
  {
    value: "flipX",
    label: "flipX",
  },
  {
    value: "flipY",
    label: "flipY",
  },
  {
    value: "flipXY",
    label: "flipXY",
  },
  {
    value: "watermark",
    label: "watermark",
  },
];

const backgroundPositionOptions = [
  {
    value: "center",
    label: "center",
  },
  {
    value: "left",
    label: "left",
  },
  {
    value: "right",
    label: "right",
  },
  {
    value: "top",
    label: "top",
  },
  {
    value: "bottom",
    label: "bottom",
  },
  {
    value: "50px 50px",
    label: "50px 50px",
  },
  {
    value: JSON.stringify({ x: 50, y: 50 }),
    label: "{ x: 50, y: 50 }",
  },
];

const backgroundSizeOptions = [
  {
    value: "auto auto",
    label: "auto auto",
  },
  {
    value: "cover",
    label: "cover",
  },
  {
    value: "contain",
    label: "contain",
  },
  {
    value: "30px 30px",
    label: "30px 30px",
  },
  {
    value: "100% 100%",
    label: "100% 100%",
  },
  {
    value: JSON.stringify({ width: 50, height: 50 }),
    label: "{width: 50, height: 50 }",
  },
];

let graph = null;

const isShowBackgroundImageChange = (value: boolean) => {
  if (value) {
    imageURL.value = base64ImgStr;
  } else {
    imageURL.value = undefined;
  }
  graphDrawBackGround();
};

const repeatTypeChange = (value: string) => {
  graphDrawBackGround();
};

const backGroundColorActiveChange = (value: string) => {
  backGroundColor.value = value;
  graphDrawBackGround();
};

const watermarkAngleInput = (value: number) => {
  graphDrawBackGround();
};

const opacityInput = (value: number) => {
  graphDrawBackGround();
};

const backgroundPositionChange = (value: string) => {
  graphDrawBackGround();
};
const backgroundSizeChange = (value: string) => {
  graphDrawBackGround();
};

const tryToJSON = (val: string) => {
    try {
      return JSON.parse(val)
    } catch (error) {
      return val
    }
  }

const graphDrawBackGround = () => {
  graph.drawBackground({
    color: backGroundColor.value,
    image: isShowBackgroundImage.value ? imageURL.value : undefined,
    position: tryToJSON(backgroundPositionValue.value),
    size: tryToJSON(backgroundSizeValue.value),
    repeat: repeatType.value,
    opacity:opacityValue.value,
    angle: watermarkAngleValue.value,
  });
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    grid: true, // 网格大小 10px，并绘制网格
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>

<style scoped>
@import "../../assets/elementPlusDemo.css";
</style>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
}
</style>
